22. Styles

INSTRUCTOR NOTE:

For more on styles, check out the documentation!

For more information about styles resources, check out the documentation here and here.

Note that styles.xml is in a resource folder. This means you can override the style and provide different attributes on differently sized devices. You just need to create a new styles.xml file, within the appropriate values folder. For example, if you wanted a HeaderTextStyle to show bigger text if the user is on a tablet with the smaller side’s screen width of 600 dp or greater, you could save a new version of the HeaderTextStyle in res/values-sw600dp/styles.xml folder. Check out this documentation for more information.

Just Java app adhering to Material Design spec:

The height of 48dp for a header comes from the Material Design spec for Single-line list (see title height).
We chose 15sp from the recommended text size for body text here.
Our checkboxes are already implemented according to the Material Design guidelines. See "Icon with text" guidelines on this page. The checkbox is treated as the icon in this case. The checkbox should be located 16dp from the left edge of the screen. The text for the checkbox should be located 72dp from the left edge of the screen. These are the two major keylines (at 16dp and 72dp from the left edge) recommended in the spec.

Another helpful tool to verify that your app is aligned to the 8dp baseline grid, is to use the Keyline Pushing app, available on Google Play. If you turn on the grid, and then go back into your app, you can see that for the most part, our content lines up with the 16dp and 72dp keylines. If it doesn’t line up exactly, it’s because there is a slight amount of padding built into the default assets provided by Android (like the checkbox).